<template>
  <gui-page :custom-header="true" :status-bar-class="['gui-bg-white']">
    <template #gHeader>
      <view class="gui-flex gui-nowrap gui-rows gui-bg-white gui-align-items-center" style="height: 44px">
        <!-- 导航文本此处也可以是其他自定义内容 -->
        <text class="gui-h5 gui-flex1 gui-text-center gui-ellipsis gui-primary-text">我的</text>
        <!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
      </view>
    </template>
    <template #gBody>
      <view class="gui-padding">
        <view>
          <view class="gui-list gui-padding gui-bg-orange5 gui-border-radius">
            <view v-if="false" class="gui-list-items">
              <view class="gui-list-image ucenter-face gui-relative">
                <image class="gui-list-image ucenter-face-image" mode="aspectFill" src="/static/logo.svg" />
              </view>
              <view class="gui-list-body">
                <view class="gui-list-title">
                  <text class="gui-list-title-text gui-primary-color">用户昵称</text>
                </view>
                <text class="gui-list-body-desc gui-color-gray gui-block">描述信息或签名信息</text>
              </view>
              <text class="gui-list-arrow-right gui-icons gui-color-gray" @tap.stop="edit">&#xe601;</text>
            </view>
            <view v-else class="gui-list-items" @tap.stop="wxLogin">
              <view class="gui-list-image ucenter-face gui-relative">
                <image class="gui-list-image ucenter-face-image" mode="aspectFill" src="/static/logo.svg" />
              </view>
              <view class="gui-list-body">
                <view class="gui-list-title">
                  <text class="gui-list-title-text gui-primary-color">登录|注册</text>
                </view>
                <text class="gui-list-body-desc gui-color-gray gui-block">登录/注册后可解锁完整功能</text>
              </view>
            </view>
            <view class="gui-padding gui-bg-orange4 gui-border-radius gui-flex gui-align-items-center gui-space-between">
              <view class="gui-flex gui-align-items-center">
                <image class="gui-icons gui-form-icon" src="/static/personal/vip.svg" />
                <text class="gui-text-small" style="margin-left: 15rpx">您有多项会员权益待领取</text>
              </view>
              <button
                class="gui-button-mini gui-bg-orange gui-noborder gui-border-radius-full"
                style="margin: unset"
                type="default"
                @tap.stop="handleVip"
              >
                <text class="gui-icons gui-color-white gui-button-text-mini">立即领取</text>
              </button>
            </view>
          </view>
          <view class="gui-margin-top">
            <gui-box-banner :items="items" :line="false" @taped="taped">
              <template #default="{ row }">
                <view class="gui-flex gui-grid-icon gui-justify-content-center" style="margin-bottom: 10rpx">
                  <gui-image :height="70" :src="row.icon" :width="70" />
                </view>
                <view class="gui-block gui-text-center">{{ row.name }}</view>
              </template>
            </gui-box-banner>
          </view>
          <view class="gui-list gui-bg-white gui-margin-top gui-padding-x">
            <view class="gui-list-items" @tap.stop="feedback">
              <text class="gui-list-icon gui-icons gui-color-orange">&#xe6b8;</text>
              <view class="gui-list-body gui-border-b">
                <view class="gui-list-title">
                  <text class="gui-list-title-text">意见反馈</text>
                  <text class="gui-badge gui-bg-red gui-color-white">12</text>
                </view>
              </view>
              <text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
            </view>
            <view class="gui-list-items" @tap.stop="about">
              <text class="gui-list-icon gui-icons gui-primary-color">&#xe628;</text>
              <view class="gui-list-body gui-border-b">
                <view class="gui-list-title">
                  <text class="gui-list-title-text">关于我们</text>
                </view>
              </view>
              <text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
            </view>
          </view>

          <view class="gui-margin-top gui-border-radius" hover-class="gui-tap">
            <text class="gui-text-center gui-bg-white gui-block-text gui-icons logoff gui-color-gray">&#xe62e; 退出登录</text>
          </view>
        </view>
      </view>
      <!--  弹窗    -->
      <gui-popup ref="helpModelRef" :z-index="9999">
        <view class="gui-relative gui-box-shadow gui-img-in gui-bg-white gui-padding gui-border-radius">
          <view class="flex-center gui-align-items-center" style="margin: 60rpx 0">
            <text class="gui-icons gui-grid-icon gui-color-orange">&#xe60c;</text>
            <text class="gui-text-small gui-margin-x gui-h4 gui-primary-color">132123156153</text>
          </view>
          <!-- 关闭按钮 -->
          <text class="gui-block modal-close gui-icons gui-absolute-rt" @tap.stop="closeHelpModel">&#xe78a;</text>
        </view>
      </gui-popup>
    </template>
  </gui-page>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import GuiImage from '@/Grace6/components/gui-image.vue'

const helpModelRef = ref<any>(null)
const items = ref<Array<any>>([
  {
    name: '志愿表',
    path: 'table/index',
    icon: '/static/personal/table.svg',
  },
  {
    name: '优惠劵',
    path: 'coupons/index',
    icon: '/static/personal/coupons.svg',
  },
  {
    name: '推荐有奖',
    path: 'recommend/index',
    icon: '/static/personal/recommend.svg',
  },
  {
    name: '联系客服',
    path: '',
    icon: '/static/personal/service.svg',
  },
])
const feedback = () => {
  uni.navigateTo({ url: './feedback/index' })
}
const about = () => {
  uni.navigateTo({ url: './about/index' })
}
// 弹窗
const openHelpModel = () => {
  uni.hideTabBar()
  helpModelRef.value.open()
}
const closeHelpModel = () => {
  uni.showTabBar()
  helpModelRef.value.close()
}
const taped = (e: any) => {
  if (e.path) {
    uni.navigateTo({
      url: `./${e.path}`,
    })
  } else {
    openHelpModel()
  }
}

const edit = () => {
  uni.navigateTo({
    url: '../grade/index',
  })
}
const handleVip = () => {
  uni.navigateTo({
    url: '../vip/index',
  })
}
const wxLogin = () => {
  uni.navigateTo({
    url: '../login/wxLogin/index',
  })
}
</script>
<style scoped>
.ucenter-face {
  width: 100rpx;
  height: 100rpx;
}
.ucenter-face-image {
  width: 100rpx;
  height: 100rpx;
}
.ucenter-line {
  height: 20rpx;
  margin: 16rpx 0;
}
.logoff {
  line-height: 88rpx;
  font-size: 28rpx;
}
.gui-list-title-text {
  line-height: 60rpx;
}
.modal-close {
  width: 100rpx;
  height: 100rpx;
  line-height: 100rpx;
  opacity: 0.88;
  text-align: center;
  font-size: 58rpx;
}
/deep/.gui-grid-icon image {
  background: white !important;
}
</style>
